<template>
  <el-upload
    class="ecm-upload"
    ref="uploadRef"
    :limit="1"
    :show-file-list="false"
    :accept="accpet"
    :on-change="changeFile"
    :auto-upload="false"
    :before-upload="beforeAvatarUpload"
  >
    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
  <el-progress v-if="processLoadding" :percentage="loadProgress" />
</template>
<script lang="ts">
import { defineComponent, ref, watch } from "vue";
import { importFileForEcm } from "../../utils/ecm";
import NotifMessage from "/@/utils/message/notification";

export default defineComponent({
  name: "ecmImage",
  props: {
    files: {
      type: Array,
      default: () => []
    },
    docid: {
      type: String,
      default: ""
    },
    imgSrc: {
      type: String,
      default: ""
    }
  },
  emits: ["setFile"],
  setup(props, { emit }) {
    const accpet = "image/*";
    const processLoadding = ref(false);
    const loadProgress = ref(0);
    const uploadRef = ref(null);
    const defaultFileList = ref<any>([]);
    const imageUrl = ref("");
    const changeFile = async file => {
      processLoadding.value = true;
      loadProgress.value = 10;
      const res: any = await importFileForEcm(props.docid, file.raw);
      let fileObj = {
        name: file.name,
        fileName: file.name,
        uuidFile: res.docid,
        fileSize: file.size,
        fileType: "image",
        url: res.rev
      };
      defaultFileList.value = [fileObj];
      imageUrl.value = URL.createObjectURL(file.raw!);
      loadProgress.value = 100;
      let timer = setTimeout(() => {
        clearTimeout(timer);
        timer = null;
        processLoadding.value = false;
        emit("setFile", {
          file: defaultFileList.value
        });
      }, 500);
      // emit("setFile", {
      //   file: defaultFileList.value,
      //   // fileStr: JSON.stringify(defaultFileList.value)
      // });
    };

    const beforeAvatarUpload = rawFile => {
      if (rawFile.type !== "image/png") {
        NotifMessage.error("Avatar picture must be JPG format!");
        return false;
      } else if (rawFile.size / 1024 / 1024 > 2) {
        NotifMessage.error("Avatar picture size can not exceed 2MB!");
        return false;
      }
      return true;
    };

    watch(
      () => props.files,
      val => {
        if (val.length > 0) {
          defaultFileList.value = val;
        }
      },
      {
        immediate: true
      }
    );

    watch(
      () => props.imgSrc,
      val => {
        if (val) {
          imageUrl.value = val;
        }
      },
      {
        immediate: true
      }
    );

    return {
      processLoadding,
      loadProgress,
      imageUrl,
      accpet,
      uploadRef,
      changeFile,
      defaultFileList,
      beforeAvatarUpload
    };
  }
});
</script>
<style>
.avatar {
  width: 100px;
  height: 100px;
}

.ecm-upload .el-upload {
  border: 1px dashed #dcdfe6;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: 0.2s;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar-uploader .el-upload:hover {
  border-color: #f89c34;
}
</style>
